<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo0102-路由04-路由参数</title>
</head>
<script src="../libs/vue.js"></script>
<script src="../libs/vue-router.3.5.3.js"></script>

<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
  <div id="app">
    <h1>Hello dynamic route !</h1>

  <router-view/>
  </div>
</body>

<script>

const SearchUser = {
  props:{
    'query':{
      /*
      注意：
      #/search?q=vue123123&q=asdfasdf
      这样的话，需要是一个数组
      */
      type: Array
    }
  },
  template:`<div>
  <h1>SearchUser Settings , query param : {{ query }}</h1> 
</div>`
};


const routes = [
{
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
]

const router = new VueRouter({
  routes 
});

const app = new Vue({
  router
}).$mount('#app');

</script>
</html>